<template>
<div id="test">

<!-- 传递对个参数时：v-slot:test="{user, data}" 解构赋值。
    使用别名：v-slot="{ user: person }"  person.***
    当 传递数据时候 undefined 时，v-slot="{user={firstName: 'Guest'}}" 
-->

<test-com>
    <!-- 或: <template #test> '不要有空格' -->
    <template 
        v-slot:test="{ 
            user = { str: 'str is undefined' }, 
            data, 
            msg='msg id undefined' 
        }"
    >
        <!-- v-slot:test="slotProps" 可以访问插槽传递过来的数据 。
            默认插槽：v-slot:default="slotProps" / v-slot="slotProps"。
            `注意: 默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确`。
            动态指令参数：<template v-slot:[slotName]>
        -->
        <div>
            <h3>test - 测试</h3>
            {{user}}
            <h3>{{user.firstName}} - {{user.lastName}} - {{user.str}}</h3>
            {{data}}
            <h3>{{data.a}} - {{data.b}} - {{data.c}} - {{data.d}}</h3>
            {{msg}}
            <h3>msg: {{msg}}</h3>
        </div>
    <hr />
    </template>
    <template v-slot:default="defaultSlotProps">
        <div>
            {{defaultSlotProps}}
            <h3>firstName: {{defaultSlotProps.user.firstName}} 
                - lastName: {{defaultSlotProps.user.lastName}}
            </h3>
        </div>
    </template>
</test-com>
<hr />
<todo-list :todos="todoList">
    <!-- <template #todo="{todo}">
        <span v-if="todo.compile">√&nbsp;&nbsp;</span>
        <span v-else style="display:inline-block;width:14px;"></span>
        <span>{{todo}}</span>
    </template> -->
</todo-list>
<hr />
<my-cascade-selector :list="cateList"></my-cascade-selector>
<hr />
<div>
    <my-input
        :name="'username'"
        :isvalidatarule="username.isValidata"
        :rulebool="username.isRule"
        :minlength="4"
        v-model="username.value"
    ></my-input>
    <h3>{{username.value}}</h3>
    <my-input
        :type="'tele'"
        :name="'tele'"
        :isvalidatarule="tele.isValidata"
        :rulebool="tele.isRule"
        :minlength="4"
        v-model="tele.value"
    ></my-input>
    <h3>{{tele.value}}</h3>
</div>
<div>
    <hr>
    <p>MyButton</p>
<my-button>primary - default</my-button><br/>
<my-button :size="'big'">primary - big</my-button><br/>
<my-button :size="'small'">primary - small</my-button><br/>
<my-button 
    :type="'add'"
    @click.native="handleClickEvent($event)"
>add</my-button><br/>
<my-button :type="'delete'">delete</my-button><br/>
<my-button :type="'edit'">edit</my-button><br/>
<my-button :type="'search'">search</my-button><br/>
<my-button :type="'save'">save</my-button><br/>
<my-button :type="'reset'">reset</my-button><br/>
</div>
<div>
    <hr>
    <p>MyTag</p>
    <my-tag>一级</my-tag><br/>
    <my-tag :level="2">二级</my-tag><br/>
    <my-tag :level="3">三级</my-tag><br/>
</div>
<div class="grid">
    <div class="g-tr">
        <div class="g-th">#</div>
        <div class="g-th">#</div>
        <div class="g-th">#</div>
        <div class="g-th">#</div>
        <div class="g-th">#</div>
    </div>
    <div class="g-tr">
        <div class="g-td">1</div>
        <div class="g-td">1</div>
        <div class="g-td">从前没你高乐感</div>
        <div class="g-td">1</div>
        <div class="g-td">1</div>
    </div>
</div>
</div>
</template>

<script>
import TestCom from "./TestCom"
import TodoList from "./Todos"
export default {
    name: "testComponent",
    data() {
        return {
            testValueSync: '',
            todoList: [
                {id: 1, txt: "苹果",compile: true},
                {id: 2, txt: "橘子",compile: false},
                {id: 3, txt: "香蕉",compile: true}
            ],
            cateList: [
                {
                    "cat_id": 2234,
                    "cat_name": "图书",
                    "cat_pid": 0,
                    "cat_level": 0,
                    "cat_deleted": false,
                    "children": [
                        {
                            "cat_id": 2236,
                            "cat_name": "四大名著",
                            "cat_pid": 2234,
                            "cat_level": 1,
                            "cat_deleted": false,
                            "children": [
                                {
                                    "cat_id": 2238,
                                    "cat_name": "红楼梦",
                                    "cat_pid": 2236,
                                    "cat_level": 2,
                                    "cat_deleted": false
                                },
                                {
                                    "cat_id": 2270,
                                    "cat_name": "是是是",
                                    "cat_pid": 2236,
                                    "cat_level": 2,
                                    "cat_deleted": false
                                }
                            ]
                        }
                    ]
                },
                {
                    "cat_id": 2235,
                    "cat_name": "家电",
                    "cat_pid": 0,
                    "cat_level": 0,
                    "cat_deleted": false,
                    "children": [
                        {
                            "cat_id": 2237,
                            "cat_name": "电脑",
                            "cat_pid": 2235,
                            "cat_level": 1,
                            "cat_deleted": false,
                            "children": [
                                {
                                    "cat_id": 2239,
                                    "cat_name": "戴尔电脑",
                                    "cat_pid": 2237,
                                    "cat_level": 2,
                                    "cat_deleted": false
                                }
                            ]
                        }
                    ]
                },
                {
                    "cat_id": 2266,
                    "cat_name": "test",
                    "cat_pid": 0,
                    "cat_level": 0,
                    "cat_deleted": false,
                    "children": [
                        {
                            "cat_id": 2267,
                            "cat_name": "text2",
                            "cat_pid": 2266,
                            "cat_level": 1,
                            "cat_deleted": false,
                            "children": [
                                {
                                    "cat_id": 2268,
                                    "cat_name": "text1",
                                    "cat_pid": 2267,
                                    "cat_level": 2,
                                    "cat_deleted": false
                                }
                            ]
                        }
                    ]
                },
                {
                    "cat_id": 2284,
                    "cat_name": "王者荣耀",
                    "cat_pid": 0,
                    "cat_level": 0,
                    "cat_deleted": false,
                    "children": [
                        {
                            "cat_id": 2285,
                            "cat_name": "射手",
                            "cat_pid": 2284,
                            "cat_level": 1,
                            "cat_deleted": false
                        },
                        {
                            "cat_id": 2286,
                            "cat_name": "刺客",
                            "cat_pid": 2284,
                            "cat_level": 1,
                            "cat_deleted": false,
                            "children": [
                                {
                                    "cat_id": 2290,
                                    "cat_name": "兰陵王",
                                    "cat_pid": 2286,
                                    "cat_level": 2,
                                    "cat_deleted": false
                                },
                                {
                                    "cat_id": 2291,
                                    "cat_name": "阿珂",
                                    "cat_pid": 2286,
                                    "cat_level": 2,
                                    "cat_deleted": false
                                }
                            ]
                        },
                        {
                            "cat_id": 2287,
                            "cat_name": "法师",
                            "cat_pid": 2284,
                            "cat_level": 1,
                            "cat_deleted": false,
                            "children": [
                                {
                                    "cat_id": 2292,
                                    "cat_name": "王昭君",
                                    "cat_pid": 2287,
                                    "cat_level": 2,
                                    "cat_deleted": false
                                },
                                {
                                    "cat_id": 2293,
                                    "cat_name": "妲己",
                                    "cat_pid": 2287,
                                    "cat_level": 2,
                                    "cat_deleted": false
                                }
                            ]
                        }
                    ]
                },
                {
                    "cat_id": 2295,
                    "cat_name": "来陪妲己 玩玩吧",
                    "cat_pid": 0,
                    "cat_level": 0,
                    "cat_deleted": false
                }
            ],
            username: {
                value: "",
                isValidata: false,
                isRule: false
            },
            tele: {
                value: "",
                isValidata: false,
                isRule: false
            },
            inputValue: ""
        }
    },
    components: {
       TestCom, 
       TodoList,
    },
    created() {
        this.username.value = "1234"
        this.tele.value = "4321"
        
    },
    mounted() {
        this.func()
    },
    methods: {
        handleClickEvent(ev) {
            console.log(ev.target)
            // console.log(this.todoList)
        },
        func() {
            this.username.isValidata = true
            this.tele.isValidata = true
        }
    },
    watch: {
        "username.value"(newVal) {
            if(this.username.value.length >= 4) {
                this.username.isRule = true
            } else {
                this.username.isRule = false
            }
        },
        "tele.value"(newVal) {
            if(this.tele.value.length >= 4) {
                this.tele.isRule = true
            } else {
                this.tele.isRule = false
            }
        }
    },
}
</script>

<style scoped>
#test {
    overflow-y: scroll;
    height:100%;
}
#test::-webkit-scrollbar {
    display: none;
}
.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 42px, 42px;
    width: 100%;
    border-top: 1px solid #000;
}
.g-tr {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid #000;
    border-top: none;
}
.g-th,
.g-td {
    overflow-x: hidden;
    min-width: 80px;
    height: 32px;
    line-height: 32px;
    padding: 6px;
    text-align: center;
    border-left: 1px solid #000;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.g-th:first-of-type,
.g-td:first-of-type {
    border-left: none;
}
</style>
